<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

   	<title>进制转换器</title>
	
	    <!-- Bootstrap Core CSS -->
    <link href="../../plugins/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="./radix_switch_files/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../../plugins/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="./radix_switch_files/style.css">

<!-- jQuery -->
<script src="../../plugins/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>


<div class="container">

<div class="row">

	<div class="col-md-12">
		<div class="panel panel-default">
					<div id="compiler" class="panel-heading">
			<form class="form-inline" role="form">
			<strong style="font-size: 16px"><i class="fa fa-cogs"></i> 在线进制转换器</strong>
			</form>
			</div>
			
			
			<div class="panel-body">
			<form role="form" id="compiler-form">
              <div class="form-group">
                <div class="row">
                  <div class="col-md-12">
					
				
                <div>
                <span>文本框表示的进制：</span>
				<label class="radio-inline">
				  <input type="radio" name="input_" value="2"> 2进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="input_" value="4"> 4进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="input_" value="8"> 8进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="input_" value="10" checked="checked"> 10进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="input_" value="16"> 16进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="input_" value="32"> 32进制
				</label>
				</div>
				<span>文本框显示的进制：</span>
             	<select id="input_num"  >
                    <option value="2">2进制</option>
                    <option value="3">3进制</option>
                    <option value="4">4进制</option>
                    <option value="5">5进制</option>
                    <option value="6">6进制</option>
                    <option value="7">7进制</option>
                    <option value="8">8进制</option>
                    <option value="9">9进制</option>
                    <option value="10" selected="">10进制</option>
                    <option value="11">11进制</option>
                    <option value="12">12进制</option>
                    <option value="13">13进制</option>
                    <option value="14">14进制</option>
                    <option value="15">15进制</option>
                    <option value="16">16进制</option>
                    <option value="17">17进制</option>
                    <option value="18">18进制</option>
                    <option value="19">19进制</option>
                    <option value="20">20进制</option>
                    <option value="21">21进制</option>
                    <option value="22">22进制</option>
                    <option value="23">23进制</option>
                    <option value="24">24进制</option>
                    <option value="25">25进制</option>
                    <option value="26">26进制</option>
                    <option value="27">27进制</option>
                    <option value="28">28进制</option>
                    <option value="29">29进制</option>
                    <option value="30">30进制</option>
                    <option value="31">31进制</option>
                    <option value="32">32进制</option>
                    <option value="33">33进制</option>
                    <option value="34">34进制</option>
                    <option value="35">35进制</option>
                    <option value="36">36进制</option>
                    </select>
               <br><br>
					<div class="input-group input-group-lg">
			         <span class="input-group-addon">转换数字</span>
			         <input id="input_value" type="text" class="form-control" value="" onpropertychange="px()" onchange="px()" oninput="px()" placeholder="在此输入待转换数字">
					</div><br><br>
				</div>
				<div class="col-md-12">
				<div>
				<span>文本框表示的进制：</span>
				<label class="radio-inline">
				  <input type="radio" name="output_" value="2" checked="checked"> 2进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="output_" value="4"> 4进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="output_" value="8"> 8进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="output_" value="10"> 10进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="output_" value="16"> 16进制
				</label>
				<label class="radio-inline">
				  <input type="radio" name="output_" value="32"> 32进制
				</label>
				</div>

				<span>文本框显示的进制：</span>
             	<select id="output_num" onchange="px(1);" >
                    <option value="2" selected="">2进制</option>
                    <option value="3">3进制</option>
                    <option value="4">4进制</option>
                    <option value="5">5进制</option>
                    <option value="6">6进制</option>
                    <option value="7">7进制</option>
                    <option value="8">8进制</option>
                    <option value="9">9进制</option>
                    <option value="10">10进制</option>
                    <option value="11">11进制</option>
                    <option value="12">12进制</option>
                    <option value="13">13进制</option>
                    <option value="14">14进制</option>
                    <option value="15">15进制</option>
                    <option value="16">16进制</option>
                    <option value="17">17进制</option>
                    <option value="18">18进制</option>
                    <option value="19">19进制</option>
                    <option value="20">20进制</option>
                    <option value="21">21进制</option>
                    <option value="22">22进制</option>
                    <option value="23">23进制</option>
                    <option value="24">24进制</option>
                    <option value="25">25进制</option>
                    <option value="26">26进制</option>
                    <option value="27">27进制</option>
                    <option value="28">28进制</option>
                    <option value="29">29进制</option>
                    <option value="30">30进制</option>
                    <option value="31">31进制</option>
                    <option value="32">32进制</option>
                    <option value="33">33进制</option>
                    <option value="34">34进制</option>
                    <option value="35">35进制</option>
                    <option value="36">36进制</option>
                    </select>
                    <br><br>
					<div class="input-group input-group-lg">
			         <span class="input-group-addon">转换结果</span>
			         <input id="output_value" type="text" class="form-control" value="" onpropertychange="px()" onchange="px()" oninput="px()" placeholder="转换结果">
					</div>
                   </div>
                 
                </div>
              </div>
              
             
            </form>
			</div>
		</div>
	</div>
	
	<div class="col-md-12">
		<div id="about" class="panel panel-default">
			<div class="panel-heading">概述</div>
			<div class="panel-body">
			<p>在线进制转换器提供了二进制，八进制，十进制，十六进制等相互转换功能。如：</p>

<ul>
<li>二进制转换十进制</li>
<li>二进制转八进制</li>
<li>二进制转十六进制</li>
<li>八进制转十进制</li>
<li>八进制转换成十六进制</li>
<li>八进制转二进制</li>
<li>十进制转二进制</li>
<li>十进制转八进制</li>
<li>十进制转十六进制</li>
<li>十六进制转二进制</li>
<li>十六进制转八进制</li>
<li>十六进制转十进制</li>
<li>……</li>
</ul>
			</div>
        </div>

	</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	$('[name="input_"]').click(function (){
		$('#input_num').val($(this).val());
		$('#input_value').val("");
		$('#output_value').val("");
	});
	$('[name="output_"]').click(function (){
		$('#output_num').val($(this).val());
		px(1);
	});
	$("#input_num").change(function(){
		$("#input_area input").removeAttr("checked");
		var val = $(this).val();
		$("#input_area input[value="+val+"]").attr("checked","checked");
		$('#input_value').val("");
		$('#output_value').val("");
	});
	$("#output_num").change(function(){
		$("#output_area input").removeAttr("checked");
		var val = $(this).val();
		$("#output_area input[value="+val+"]").attr("checked","checked");
		px(1);
	});
});
function pxparseFloat(x,y){
	x=x.toString();
	var num=x;
	var data=num.split(".");
	var you=data[1].split(""); //将右边转换为数组 得到类似 [1,0,1]
	var sum=0;  //小数部分的和
	for(var i=0;i<data[1].length;i++){
		sum+=you[i]*Math.pow(y,-1*(i+1))
	}
	return parseInt(data[0],y)+sum;
}
function zhengze(x){
	var str;
	x=parseInt(x);
	if(x<=10){
		str=new RegExp("^[+\\-]?[0-"+(x-1)+"]*[.]?[0-"+(x-1)+"]*$","gi");
	}else{
		var letter="";
		switch(x){
			case 11:letter="a";break;
			case 12:letter="b";break;
			case 13:letter="c";break;
			case 14:letter="d";break;
			case 15:letter="e";break;
			case 16:letter="f";break;	
			case 17:letter="g";break;
			case 18:letter="h";break;
			case 19:letter="i";break;
			case 20:letter="j";break;
			case 21:letter="k";break;
			case 22:letter="l";break;
			case 23:letter="m";break;
			case 24:letter="n";break;
			case 25:letter="o";break;
			case 26:letter="p";break;	
			case 27:letter="q";break;
			case 28:letter="r";break;
			case 29:letter="s";break;
			case 30:letter="t";break;
			case 31:letter="u";break;
			case 32:letter="v";break;
			case 33:letter="w";break;
			case 34:letter="x";break;
			case 35:letter="y";break;
			case 36:letter="z";break;	
		}
		str=new RegExp("^[+\\-]?[0-9a-"+letter+"]*[.]?[0-9a-"+letter+"]*$","gi");
	}		
	return str;
}
var n=50;
var shurukuang="";
var flag="";
function px(y){
	if($("#input_value").val()!=flag||y){
		flag=$("#input_value").val();
		if($("#input_num").selectedIndex<n){
			$("#input_value").val("");
			$("#output_value").val("");
		}else{
			var px00=$("#input_value").val();
			var px0=px00.match(zhengze($("#input_num").val()));
			if(px0){
				if(px0[0].indexOf(".")==-1){
					var px1=parseInt(px0,$('#input_num').val());
				}else{
					var px1=pxparseFloat(px0,$('#input_num').val());
				}
				px1=px1.toString($('#output_num').val());
				$("#output_value").val(px1);
				shurukuang=px00;
			}else{
				$("#input_value").val(shurukuang);
			}
		}
		n=$("#input_num").selectedIndex;	
	}
	if($("#input_value").val()==""){
		$("#output_value").val("");
  }
}
</script>

	

      

<hr>

</div>

<script src="../../plugins/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body></html>